<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>view中的模版</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Underscore-1.8.3min.js"></script>
		<script src="js/backbone-min.js"></script>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<div id="search_container"> </div>
		<script type="text/template" id="search_template">
			 <ul>
			 	<% _.each(labels,function(name){
			 		if(name!="label2"){
			 			%>
			 			<li><%=name%></li>
			 	   <%
			 		}
			 	})%>
			 </ul>
		</script>
		<script type="text/javascript">
		 var SearchView = SearchView || {};
		 SearchView.abc=Backbone.View.extend({
		    	el:"#search_container",
		    	initialize:function(){
		    		var labels=['黑喵','黄喵','白喵'];
		    		this.render({labels:labels});
		    	},
		    	render:function(context){
		    		//使用underscore这个库来编译模版
		    		var template=_.template($("#search_template").html())(context);
		    		//加载模版到对应的el属性中
		    		$(this.el).html(template);
		    	},
		    	events:{
		    		//就是这里绑定的
		    		"click input[type=button]":"dosearch"
		    		//定义
		    	},
		    	dosearch:function(){
		    		alert("seachr for"+$("#search_input").val());
		    	}
		    });
		    var seachView=new SearchView.abc();
		</script>
	</body>
</html>